<template>
    <div class="weather-compare container-bottom-20">
        <CardBox title="指标对比" :timeRange="timeRange" :showTimeRange="true" @date-change="handleDateChange"></CardBox>
        <div class="content-container content-container-height-262">
            <div class="device-list-layout" @click.self="showMoreMenu = false">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="0" @click="toggleTypeMenu">{{selectGroupType}}</el-menu-item>
                    <el-menu-item index="1">{{selectPoint}}</el-menu-item>
                </el-menu>
                <div class="more-menu">
                    <div class="device-list-more2" v-show="showTypeMenu">
                        <div class="device-list-more-item-title"></div>
                        <div class="device-list-more-item-list">
                            <div class="device-list-more-item" v-for="(item,index) in groupType" @click="typeSelect(index,item)" :key="index">{{item}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div ref="chartRef" class="chart-container" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import * as echarts from 'echarts'
import {EventBus} from "../../utils/event-bus";

export default {
    name: 'WeatherCompare',
    components: {
        CardBox
    },
    data() {
        return {
            color:['#3B7EFF','#00FFE3','#9890FF','#50C32D','#B38611','#DBAF86','#3B7EFF','#00FFE3'],
            type:"qixiang",
            chart: null,
            itemList:null,
            activeIndex: '1',
            showTypeMenu:false,
            timeRange:this.getDateRange(),
            showMoreMenu: false,
            selectGroupType:"日",
            groupType:["年","季","月","周","日"],
            startDate:'',
            endDate:'',
            pointName:'',
            selectPoint:'',
            varNameList:{
                kongqi:{pointCode:"pm10",pointName:"PM10"},
                qixiang:{pointCode:"taAvg",pointName:"空气温度"},//pointCode: "rhAvg", pointName: "相对湿度"
                turang:{ pointCode: "temp20cmAvg", pointName: "土壤温度"} //pointCode: "vwc20cmAvg","pointName": "土壤含水量"
            },
        }
    },
    // created() {
    //     this.type=this.$route.query.deviceType;
    //     EventBus.$on('set-biological-device-type', (message) => {
    //         this.type=message;
    //         this.selectPoint=this.varNameList[this.type].pointName;
    //         this.pointName=this.varNameList[this.type].pointCode;
    //         this.getData();
    //     });
    // },
    watch: {
        '$route.query': {
            handler(newQuery, oldQuery) {
                // 当路由的query参数发生变化时，执行这里的代码
                this.type=newQuery.deviceType;
                this.getData();
            },
            deep: true, // 设置为true以深度观察对象内部的变化
            immediate: true // 组件创建时立即执行一次
        }
    },
    mounted() {

        this.type=this.$route.query.deviceType;
        this.getData();
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
        }
    },
    methods: {
        getDateRange(){
            let endDate=new Date();
            let startDate=new Date();
            let d=7;
            switch (this.selectGroupType) {
                case "日":
                    d=7;
                    break;
                case "月":
                    d=7*30;
                    break;
                case "周":
                    d=7*7;
                    break;
                case "季":
                    d=7*90;
                    break;
                case "年":
                    d=7*365;
                    break;
            }
            startDate.setDate(endDate.getDate()-d);
            return [this.getDate(startDate),this.getDate(endDate)];
        },
        getDate(date){
            const year = date.getFullYear();
            const month = date.getMonth() + 1; // 月份从0开始，需要加1
            const day = date.getDate();
            const today=`${year}-${month}-${day}`+' 00:00:00';
            return today;
        },
        typeSelect(index,item) {
            this.selectGroupType=item;
            this.showTypeMenu=false;
            this.timeRange=this.getDateRange();
            this.getData();
        },
        toggleTypeMenu() {
            this.showTypeMenu = !this.showTypeMenu;
        },
        handleSelect(index,item) {
            this.pointName=item.pointCode;
            this.selectPoint=item;
            this.showMoreMenu=false;
            this.getData();
        },
        toggleMenu() {
            this.showMoreMenu = !this.showMoreMenu;
        },
        getData(){
            this.selectPoint=this.varNameList[this.type].pointName;
            this.pointName=this.varNameList[this.type].pointCode;
            this.$api.environment.getGroupVarList(this.type,{start_date:this.timeRange[0],end_date:this.timeRange[1],varName:this.pointName,type:this.selectGroupType}).then(res => {
                this.initChart(res);
            });
        },
        initChart(datas) {
            if (this.chart) {
                this.chart.dispose();
                this.chart = null;
            }
            this.chart = echarts.init(this.$refs.chartRef);
            let series = [];
            let selected = {};
            for (let i = 0; i < datas.yDatas.length; i++) {
                selected[datas.legends[i]]=i<5?true:false;
                series.push( {
                    name: datas.legends[i],
                    type: 'bar',
                    smooth: true,
                    // symbol: 'circle',
                    // symbolSize: 8,
                    data: datas.yDatas[i],
                    lineStyle: {
                        color: this.color[i]
                    },
                    itemStyle: {
                        color: this.color[i],
                        fontFamily: 'DIN Pro'
                    }
                })
            }
            const option = {
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,24,106,0.8)',
                    borderColor: 'rgba(0,150,255,0.3)',
                    textStyle: {
                        color: '#fff',
                        fontFamily: 'DIN Pro'
                    }
                },
                legend: {
                    // data: ['趋势一', '趋势二'],
                    data: datas.legends,
                    selected:selected,
                    type: 'scroll',  // 设置为滚动图例
                    orient: 'horizontal',  // 或 'vertical'，根据布局需求选择
                    height: 50,  // 设置图例高度
                    pageIconColor: '#ff781f',  // 设置翻页箭头颜色
                    pageTextStyle: {
                        color: '#999'  // 设置翻页数字颜色
                    },
                    pageIconSize: 11,  // 设置翻页箭头大小
                    textStyle: {  // 设置图例文字的样式
                        color: '#ffffff',
                        fontFamily: 'DIN Pro'
                    },
                    itemHeight: 10,  // 设置图例项的高度
                    itemWidth: 15,  // 设置图例项的宽度
                    left: '1%',  // 设置图例左边距
                    top: '1%'  // 设置图例上边距
                    // textStyle: {
                    //     color: '#ffffff',
                    //     fontFamily: 'DIN Pro'
                    // },
                    // top: '5%'
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    // data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    data: datas.xDatas,
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisLabel: {
                        color: '#ffffff',
                        fontFamily: 'DIN Pro'
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#ffffff',
                        fontFamily: 'DIN Pro'
                    }
                },
                series: series
            }
            
            this.chart.setOption(option)
            
            // 监听窗口大小变化，重绘图表
            window.addEventListener('resize', () => {
                this.chart.resize()
            })
        },
        handleDateChange(val) {
            this.timeRange = [val[0],val[1]];
            // this.endDate = val[1];
            this.getData();
        }
    }
}
</script>

<style lang="scss" scoped>
.weather-compare {
}
.device-list-layout {
    padding: 0px 20px;
    height: 2px;
    position: relative;
    ::v-deep(.el-menu){
        background: none;
        cursor: pointer;
        border-bottom: none;
    }
    ::v-deep(.el-menu-item),
    ::v-deep(.el-submenu){
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        color: #07FFE5;
        background: none;
        border-bottom: none;
    }
    ::v-deep(.el-menu-item:not(.is-disabled):hover){
        background: none;
        color: #07FFE5;
    }
    ::v-deep(.el-menu-item:not(.is-disabled):focus){
        background: none;
        color: #07FFE5;
    }
    ::v-deep(.el-menu-item.is-active){
        color: #07FFE5;
        border-bottom: none;
        background: none;
    }
    .line{
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, rgba(55, 185, 255, 1), rgba(63, 182, 255, 0.3569),rgba(67, 180, 255, 0));
        position: relative;
        top: -10px;
    }
    .more-menu {
        position: relative;
        top: -25px;
        left: 451px;
        width: 16px;
        height: 16px;
    }
    .device-list-more {
        position: absolute;
        top: 0;
        left: -200px;
        z-index: 200;
        color:#fff;
        font-size: 14px;
        background:rgba(13, 45, 111, 0.4);
        padding:10px 0 10px 24px;
        width: 184px;
        height: 238px;
    }
    .device-list-more2 {
        position: absolute;
        top: 0;
        left: -400px;
        z-index: 200;
        color:#fff;
        font-size: 14px;
        background:rgba(13, 45, 111, 0.4);
        padding:10px 0 10px 24px;
        width: 124px;
        height: 238px;
    }
    .device-list-more-item-list{
        overflow-y: scroll;
        height: 208px;
        .device-list-more-item{
            line-height: 30px;
            height: 30px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .device-list-more-item:hover{
            color: #07FFE5;
            cursor: pointer;
        }
    }
}
</style>

